<template>
  <div class="shipment-container">
    <!-- 流程图示 -->
    <div class="flow-chart">
      <img v-if="userLanguage.code == 'zh_CN'" src="@/assets/images/icons/order_parcel.png" class="flow-image" alt="">
      <img v-else src="@/assets/images/icons/order_parcel.png" class="flow-image" alt="">
    </div>

    <div class="title">{{ $t('user.myWaybill') }}</div>

    <div class="filter-section">
      <div class="filter-tabs">
        <div class="tab-item" :class="{ active: currentName === 'name1' }" @click="selectTab('name1')">
          {{ $t('user.all') }}
        </div>
        <div class="tab-item" :class="{ active: currentName === 'name2' }" @click="selectTab('name2')">
          Title
          <span class="badge">
            (0)
          </span>
        </div>
        <div class="tab-item" :class="{ active: currentName === 'name3' }" @click="selectTab('name3')">
          Title
          <span class="badge">
            (0)
          </span>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <Input v-model="form.expressOrderNo" @keyup.enter="keySearch" :placeholder="'Product Name/Order Number'"
        style="width:250px;" prefix="ios-search" />

      <!-- <select v-model="form.lotteryActivity" class="filter-select">
        <option value="">{{ $t('activity.all_activity_type') }}</option>
        <option v-for="item in typeList" :value="item.value" :key="item.value">
          {{ $t(item.label) }}
        </option>
      </select> -->

      <DatePicker class="date-picker" @on-change="changeDate" :clearable="true" type="daterange" placement="bottom-end"
        :placeholder="$t('user.start_end')">
      </DatePicker>

      <button class="search-button" @click="onSearch">{{ $t("user.search") }}</button>
    </div>


    <!-- 表格区域 -->
    <div class="table-area">
      <!-- 表头 -->
      <div class="table-header">
        <div class="header-row">
          <div class="header-col">Product Details</div>
          <div class="header-col text-center">Weight(g)</div>
          <div class="header-col text-center">Dimension(cm)</div>
          <div class="header-col text-center">Freight</div>
          <div class="header-col text-center">Shipping Method</div>
          <div class="header-col text-center">Status</div>
        </div>
      </div>
    </div>


    <!-- 包裹列表 -->
    <div class="parcel-list">
      <div v-if="loading" class="loading-indicator">
        <div class="spinner"></div>
      </div>

      <div v-if="!loading && dataList.length === 0" class="empty-state">
        {{ landingText }}
      </div>

      <div v-for="item in dataList" :key="item.id" class="parcel-card">
        <!-- 卡片顶部信息 -->
        <div class="card-header">
          <div class="parcel-meta">
            <div class="tracking-number">{{ $t("user.waybillNumber") }}: {{ item.expressOrderNo }}</div>
            <div class="submission-time">{{ $t("user.submissionTime") }}: {{ item.createTime }}</div>
            <div class="destination" v-if="item.orderAddress">
              {{ $t("user.sendTo") }}: {{ item.orderAddress.countryText }}
            </div>
          </div>

          <div class="action-buttons">
            <!-- 留言按钮 -->
            <button v-if="item.showMsgBoardFlag == 1" @click="openMsgPop(item)" class="msg-button">
              <span class="badge" v-if="item.unReadMsgFlag">•</span>
              {{ $t('order.msg_btn_text') }}
            </button>
          </div>
        </div>

        <!-- 包裹主要内容 -->
        <div class="card-body">
          <!-- 包裹信息列 -->
          <div class="parcel-info">
            <div class="parcel-image">
              <product-picture v-if="item.orderItemImageList && item.orderItemImageList.length > 0"
                :image-list="[item.orderItemImageList[0]]"></product-picture>
              <div v-else class="default-image"></div>
              <div class="item-count">
                {{ $t('wayBill.shipmentListOrdersItems', { v1: item.orderNum || 0, v2: item.itemTotalNum || 0 }) }}
              </div>
            </div>
          </div>

          <!-- 重量列 -->
          <div class="parcel-weight">
            {{ weightShow(item) }}
            <span v-if="weightShow(item)" class="tooltip-icon" :title="tipText(item)">ⓘ</span>
          </div>

          <!-- 尺寸列 -->
          <div class="parcel-dimensions">
            <template v-if="item.height && item.width">
              {{ item.length || '' }}
              {{ item.length && (item.width || item.height) ? '*' : '' }}
              {{ item.width || '' }}
              {{ item.width && (item.length || item.height) ? '*' : '' }}
              {{ item.height || '*' }}
              <span v-if="item.declareWeight" class="tooltip-icon" :title="$t('wayBill.size_desc')">ⓘ</span>
            </template>
            <template v-else>***</template>
          </div>

          <!-- 运费列 -->
          <div class="parcel-shipping">
            {{ item.declareCurrency }}
            {{ item.finalTotalFee ? item.finalTotalFee : "--" }}
          </div>

          <!-- 路线列 -->
          <div class="parcel-route">
            {{ item.channelName }}
          </div>

          <!-- 状态列 -->
          <div class="parcel-status">
            <div class="status-text">{{ item.statusName }}</div>
            <div v-if="item.status == 'COMPLETED'" class="completed-time">{{ item.completeTime }}</div>

            <!-- 申请奖励按钮 -->
            <button v-if="item.status == 'DELIVERED'" @click="rewardBtn()" class="reward-button">
              🎁 {{ $t('user.apply_award') }}
            </button>

            <!-- 查看物流 -->
            <button v-if="item.status == 'DELIVERED' || item.status == 'COMPLETED'"
              @click="showParcelPop(item.expressNo)" class="tracking-button">
              {{ $t("user.viewLogistics") }}
            </button>
          </div>


        </div>

        <div class="card-tools">
          <!-- 客服按钮 -->
          <Button @click="showChatPop(item.expressOrderNo)" type="primary" ghost>
            {{ $t("user.consult") }}
          </Button>
          <!-- 操作列 -->
          <div class="parcel-actions">
            <!-- 运单详情 -->
            <router-link v-if="item.status != 'INIT'" :to="`/transport/roam?id=${item.expressOrderNo}`"
              class="detail-link">
              {{ $t('user.waybillDetails') }}
            </router-link>

            <!-- 提交运单 -->
            <router-link v-if="item.status == 'INIT'" :to="`/submit/parcel?id=${item.expressOrderNo}`"
              class="detail-link" @click="submitParcelMet">
              {{ $t("submitParcel.submissionWaybill") }}
            </router-link>

            <!-- 确认运单 -->
            <router-link v-if="item.status == 'WAIT_CONFIRM' || item.status == 'CONFIRMING'"
              :to="`/transport/roam?id=${item.expressOrderNo}`" class="confirm-button" @click="pointMet">
              {{ $t("submitParcel.confirmationWaybill") }}
            </router-link>

            <!-- 支付运单 -->
            <router-link v-if="item.status == 'WAIT_PAYMENT'" :to="`/pay?id=${item.expressOrderNo}&&markText=waybill`"
              class="pay-button">
              {{ $t("user.paymentWaybill") }}
            </router-link>

            <!-- 取消运单 -->
            <Button type="primary" v-if="item.status == 'WAIT_PAYMENT' || item.status == 'INIT'"
              @click="onCancelPop(item.expressOrderNo)">
              {{ $t("user.cancellationWaybill") }}
            </Button>

            <!-- 确认收货 -->
            <Button type="primary" v-if="item.status == 'DELIVERED'" @click="showCompletedPop(item.expressOrderNo)">
              {{ $t("user.confirmReceipt") }}
            </Button>
          </div>
        </div>



        <!-- 备注信息 -->
        <order-remark :lastExpressMessage="item.lastExpressMessage ? item.lastExpressMessage : ''"
          :issueTypeReplay="item.lastExpressMessage ? '0000' : ''">
        </order-remark>

        <!-- 免运费入口 -->
        <div v-if="item.lotteryActivity !== 0" @click="freeBtn(item.activityId)" class="free-shipping-entry">
          {{ textMap[item.lotteryActivity] || '' }} →
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination" v-if="dataList.length > 0">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
        :page-size="form.pageSize" show-sizer />
    </div>

    <!-- 各种弹窗组件 -->
    <t-cancel-parcel ref="cancelRef" :cancelItem="cancelItem" @confirmCancel="confirmCancel">
    </t-cancel-parcel>

    <guide-assiatant ref="guideRef" :dataArr="guideArr" :titleData="titleName">
    </guide-assiatant>

    <msg-pop ref="msgPopRef" :msgInfo="msgInfo">
    </msg-pop>

    <received-pop ref="receivedRef" @expressCompletedMet="onExpressCompleted">
    </received-pop>

    <!-- 物流详情弹窗 -->
    <Modal v-model="physical" :title="$t('user.logisticsInfo')" class="logistics-modal">
      <div class="logistics-content">
        <t-loading v-if="logisticsLoading"></t-loading>
        <div v-if="logisticsInfo.length < 1">{{ $t('wayBill.no_data_text') }}</div>
        <div v-for="item in logisticsInfo" :key="item.logisticsId" class="tracking-steps">
          <div v-for="(setItem, index) in item.logisticsSteps" :key="index" class="tracking-step">
            <div class="step-content">{{ setItem.remarks }}</div>
            <div class="step-time">{{ setItem.acceptTime }}</div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  expressCompleted,
  expressOrderCancel,
  expressOrderList,
  parcelList,
  queryLogisticsIntl,
  getListExpressMessage,
  lotteryClick
} from "@/api/expressOrder";
import { mapState } from "vuex";
import ChatPop from "@/views/main/user/my-shipment/chat-pop";
import TLoading from "@/components/t-loading";
import ProductPicture from "@/views/main/user/components/product-picture";
import OrderStatus from "@/views/main/user/components/order-status";
import TLandingPage from '@/components/t-landing_page.vue';
import CountDown from "@/views/main/user/components/count-down";
import TCancelParcel from "@/components/t-cancel-parcel.vue";
import { pointUser } from "@/common/point/api-hook";//打点日志
import GuideAssiatant from './components/guide-assiatant.vue';
import OrderRemark from './components/order-remark.vue';
import MsgPop from './components/msg-pop.vue';
import ReceivedPop from './my-shipment/received-pop.vue';
import TPlatform from "@/components/t-platform";

export default {
  name: "order",
  components: {
    ProductPicture, TLoading, ChatPop, OrderStatus, TLandingPage,
    CountDown, TCancelParcel, GuideAssiatant, OrderRemark,
    MsgPop,
    ReceivedPop,
    TPlatform,
  },
  data() {
    return {
      msgInfo: [],
      cancelItem: {
        title: this.$t('wayBill.cancel_pop_title'),
        text: this.$t('wayBill.confirm_cancel'),
        placeholder: this.$t('user.desc_reason'),
        cancel: this.$t('wayBill.close_pop'),
        confirm: this.$t('wayBill.yes_confirm')
      },
      currentName: "name1",
      tabs: [
        { name: "name1", label: this.$t('user.all') },
        { name: "name2", label: this.$t('user.waybillNumber') },
        { name: "name3", label: this.$t('user.sendTo') },
      ],
      loading: false,
      visible: false,
      viewImage: "",
      physical: false, // 物流弹窗
      chatId: "",
      chatPop: false, // 聊天弹窗
      form: {
        expressOrderNo: "", // 运单
        pageNo: 1, // 页
        pageSize: 20, // 页数
        status: "", // 运单状态
        createTimeStart: "",
        createTimeEnd: "",
        lotteryActivity: ""
      },
      totalPage: 1,
      dataList: [], // 订单列表
      cancelType: "", // 取消的理由
      cancelPop: false, // 取消弹窗
      cancelOrderRmk: "", // 取消订单理由
      expressOrderNo: "", // 订单号
      argumentList: [
        {
          value: 1,
          label: "user.buyIt",
        },
        {
          value: 2,
          label: "user.incorrectInformationFilling",
        },
        {
          value: 3,
          label: "user.sellersOutStock",
        },

        {
          value: 4,
          label: "user.unablePay",
        },
        {
          value: 5,
          label: "user.otherReasons",
        },
      ],
      landingText: this.$t('transport.empty_desc'),
      logisticsLoading: false,
      logisticsInfo: [], // 物流信息
      parcelPop: false, // 查询包裹物流信息
      parcelLoading: false, // 查询物流包裹信息loading
      parcelList: [], // 查询物流包裹数据
      guideArr: [
        { id: 1, title: 'assistant.assistantParcelSub1', img: 'https://libcdn1.hahbuy.com/guide/如何支付国际运费&确认最终运费.gif' },
        { id: 2, title: 'assistant.assistantParcelSub2', img: 'https://libcdn1.hahbuy.com/guide/如何查看国际物流.gif' }
      ],
      titleName: 'assistant.assistantParcel',
      typeList: [
        {
          value: 'true',
          label: this.$t('activity.activity_type_text1')
        }
      ],
      textMap: {
        1: this.$t('activity.free_enter_btn_text'),
        2: this.$t('activity.look_activity_record')
      },
    };
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
      config: state => state.config.config,
    })
  },
  created() {
    if (this.$route.params.orderNo) {
      this.form.expressOrderNo = this.$route.params.orderNo;
    }
    this.getDataList();
  },
  methods: {
    renderTabLabel(key) {
      return (h) => {
        return h(
          'div',
          {
            class: {
              'custom-tab-label': true // 为外层 div 设置自定义的 class 类名
            }
          },
          [
            // 这里添加一个图片示例
            h('img', {
              attrs: {
                src: require('@/views/main/activity/freeShipping/images/free_icon.png'),
                alt: 'Icon'
              },
              class: {
                'custom-tab-img': true // 设置自定义的 class 类名
              },
            }),
            // 渲染国际化文本
            h('span', this.$t(key))
          ]
        );
      };
    },
    pointMet() {
      pointUser('actions', '2014');
    },
    submitParcelMet() {
      pointUser('actions', '2012-1');
    },
    // 物流
    showParcelPop(expressNo) {

      pointUser('actions', '3000-1');

      this.parcelPop = true;
      this.viewLogistics(expressNo);
    },
    viewLogistics(id) {
      // 查看物流信息
      this.logisticsInfo = [];
      this.physical = true;
      this.logisticsLoading = true;
      queryLogisticsIntl(id)
        .then((res) => {
          this.logisticsInfo = res.result;
          this.logisticsLoading = false;
        })
        .catch(() => {
          this.logisticsLoading = false;
        });
    },
    sortList(list) {
      let arr = [];
      for (let i = 0; i < list.length; i++) {
        arr.unshift(list[i]);
      }
      return arr;
    },
    rewardBtn() {
      this.$router.push("/get-rewards")
    },
    // 搜索
    onSearch() {
      this.form.pageNo = 1;
      this.getDataList();
    },
    // 日期筛选
    changeDate(val) {
      this.form.createTimeStart = val[0];
      this.form.createTimeEnd = val[1];
    },
    showCompletedPop(expressOrderNo) {
      this.$refs.receivedRef.open(expressOrderNo);
    },
    onExpressCompleted(val) {
      expressCompleted(val)
        .then((res) => {
          if (res.code == 200) {
            this.$refs.receivedRef.closeMet();
            this.getDataList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onViewImage(image) {
      this.visible = true;
      this.viewImage = image;
    },
    showChatPop(orderNo) {
      if (window.ssq) {
        ssq.push('chatOpen');
        ssq.push('sendTextMessage', "Hi,my order No. " + orderNo);
      }
    },
    // 显示取消弹窗
    onCancelPop(id) {
      this.$refs.cancelRef.cancelPop = true;
      this.expressOrderNo = id;
    },
    keySearch(typeKey) {
      // 搜索
      if (typeKey.code == "Enter") {
        this.form.pageNo = 1;
        this.getDataList();
      }
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onTab(type) {
      // 查询类型
      this.form.status = type;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onPage(index) {
      // 下一页
      this.form.pageNo = index;
      this.selectLength = 0;
      this.all = false;
      this.getDataList();
    },
    confirmCancel(val) {
      if (val == "") {
        this.$Message.error(this.$t("user.pleaseFillReason"));
        this.$Modal.remove();
        return false;
      }
      expressOrderCancel({
        cancelReason: val, // 取消原因
        expressOrderNo: this.expressOrderNo, // 运单号
      }).then(() => {
        this.expressOrderNo = "";
        this.val = "";
        this.$refs.cancelRef.cancelPop = false;
        this.getDataList();
      }).catch(() => { });
    },
    getDataList() {
      // 获取订单列表
      this.loading = true;
      expressOrderList(this.form)
        .then((res) => {
          this.dataList = res.result.records;
          this.totalPage = res.result.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    openMet() {
      this.$refs.guideRef.open();
    },
    // 打开留言板弹窗
    openMsgPop(info) {
      info.unReadMsgFlag = 0;
      getListExpressMessage(info.expressOrderNo).then((res) => {
        this.msgInfo = res.result;
        this.$refs.msgPopRef.open();
      })
    },
    freeBtn(activityId) {
      lotteryClick({ activityId: activityId, operateType: 2 });
      let url = `${this.config.webDomain}/free-shipping?acId=${activityId}`
      window.open(url, '_blank');
      // this.$router.push(`/free-shipping?acId=${activityId}`);
    },
    weightShow(item) {
      if (item.status == 'WAIT_PAYMENT' || item.status == 'WAIT_PACK') {
        if (item.estimateFeeDetail && item.estimateFeeDetail.calcWeight) {
          return `${item.estimateFeeDetail.calcWeight || ''} g`;
        } else {
          return ''
        }
      } else if (item.status == 'WAIT_CONFIRM' || item.status == 'DELIVERED' || item.status == 'COMPLETED') {
        if (item.finalFeeDetail && item.finalFeeDetail.calcWeight) {
          return `${item.finalFeeDetail.calcWeight || ''} g`;
        } else {
          return ''
        }
      } else {
        if (item.declareWeight) {
          return item.declareWeight;
        } else {
          return ''
        }
      }
    },
    tipText(item) {
      if (item.status == 'INIT') {
        return this.$t('wayBill.weight_text');
      } else if (item.status == 'WAIT_PAYMENT' || item.status == 'WAIT_PACK') {
        return this.$t('wayBill.weight_text_tooltip');
      } else if (item.status == 'WAIT_CONFIRM' || item.status == 'DELIVERED' || item.status == 'COMPLETED') {
        return this.$t('wayBill.weight_text1_tooltip');
      } else {
        return this.$t('wayBill.weight_desc');
      }
    },
    selectTab(name) {
      this.currentName = name;
    }
  },
};
</script>

<style scoped lang="less">
.shipment-container {
  max-width: 1200px;
  margin: 0 auto;
  color: #333;
  border-radius: 20px;
  background: #FFF;
  padding: 20px;

  .title {
    color: #2F333A;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 12px;
  }

  .flow-chart {
    margin-bottom: 30px;

    .flow-image {
      width: 100%;
    }
  }

  .header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;

    .tabs-wrapper {
      flex-grow: 1;

      :deep(.custom-tabs) {
        .ivu-tabs-bar {
          border-bottom: none;
          margin-bottom: 0;
        }

        .ivu-tabs-nav {
          .ivu-tabs-tab {
            padding: 10px 20px;
            margin-right: 5px;
            border-radius: 4px;
            background: #f5f5f5;
            border: none;
            font-weight: 500;

            &.active-tab {
              background: #FF186B;
              color: white;
            }
          }

          .ivu-tabs-ink-bar {
            display: none;
          }
        }
      }
    }

    .assistant-btn {
      padding: 8px 15px;
      background: #f0f7ff;
      color: #FF186B;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-weight: 500;

      .assistant-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #FF186B;
        color: white;
        border-radius: 50%;
        margin-right: 8px;
        font-size: 14px;
      }
    }
  }

  .search-section {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;

    .search-input {
      position: relative;
      flex: 1;
      min-width: 250px;

      .search-field {
        width: 100%;
        padding: 10px 15px 10px 35px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;

        &:focus {
          outline: none;
          border-color: #FF186B;
        }
      }

      .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
      }
    }

    .filter-select {
      flex: 1;
      min-width: 200px;
      padding: 0 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: white;
      font-size: 14px;
      appearance: none;
      height: 36px;
    }

    .date-picker {
      flex: 1;
      min-width: 250px;

      :deep(.ivu-input) {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
      }
    }

    .search-button {
      padding: 0 25px;
      background: #FF186B;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      height: 36px;

      &:hover {
        background: #FF186B;
      }
    }
  }

  .table-area {
    padding: 0 13px;
    border-radius: 6px;
    background: #F5F5F5;
    height: 33px;
    margin-bottom: 20px;

    .table-header {

      .header-row {
        display: flex;
        align-items: center;

        .header-col {
          flex: 1;
          height: 33px;
          display: flex;
          align-items: center;
          color: #969696;
          font-size: 12px;

          &.text-center {
            justify-content: center;
          }
        }
      }
    }
  }

  .parcel-list {
    margin-bottom: 30px;

    .loading-indicator {
      text-align: center;
      padding: 40px 0;

      .spinner {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #FF186B;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
    }

    .empty-state {
      text-align: center;
      padding: 40px;
      color: #999;
      background: #f9f9f9;
      border-radius: 8px;
    }

    .parcel-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      overflow: hidden;
      border: 1px solid #eee;
      padding: 0 12px;

      .card-tools {
        display: flex;
        justify-content: flex-end;
        padding: 12px 0;
        border-top: 1px solid #eee;

        gap: 10px;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;

        .parcel-meta {
          flex: 1;
          display: flex;
          align-items: center;
          height: 20px;
          color: #969696;
          font-size: 12px;

          .tracking-number {}

          .submission-time,
          .destination {
            font-size: 12px;
            color: #969696;
          }
        }

        .action-buttons {
          display: flex;
          gap: 10px;

          .msg-button {
            padding: 6px 12px;
            background: white;
            border: 1px solid #ff4d4f;
            color: #ff4d4f;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;

            .badge {
              color: #ff4d4f;
              margin-right: 5px;
              font-size: 16px;
            }
          }

          .support-button {
            padding: 6px 12px;
            background: white;
            border: 1px solid #FF186B;
            color: #FF186B;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
          }
        }
      }

      .parcel-actions {
        display: flex;
        gap: 8px;
        align-items: center;

        .submit-button {
          color: #FF186B;
        }

        /deep/ .detail-link {
          color: #FF186B;
          font-size: 14px;
          text-decoration: none;
          font-weight: 500;
        }

        .submit-button,
        .confirm-button,
        .pay-button {
          padding: 6px 12px;
          background: #FF186B;
          color: white;
          border: none;
          border-radius: 4px;
          font-size: 13px;
          cursor: pointer;
          text-align: center;
          text-decoration: none;
        }

        .cancel-button {
          padding: 6px 12px;
          background: white;
          border: 1px solid #ff4d4f;
          color: #ff4d4f;
          border-radius: 4px;
          font-size: 13px;
          cursor: pointer;
        }

        .receive-button {
          padding: 6px 12px;
          background: #52c41a;
          color: white;
          border: none;
          border-radius: 4px;
          font-size: 13px;
          cursor: pointer;
        }
      }

      .card-body {
        display: flex;
        padding: 12px 0;
        flex-wrap: wrap;

        >div {
          flex: 1;
          min-width: 150px;
        }

        .parcel-info {
          display: flex;
          align-items: center;

          .parcel-image {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;

            .default-image {
              width: 100%;
              height: 100%;
              background: #f5f5f5;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #999;
            }

            .item-count {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(0, 0, 0, 0.6);
              color: white;
              text-align: center;
              padding: 3px;
              font-size: 12px;
            }
          }
        }

        .parcel-weight,
        .parcel-dimensions {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;

          .tooltip-icon {
            margin-left: 5px;
            color: #999;
            cursor: help;
          }
        }

        .parcel-shipping {
          font-weight: 600;
          color: #FF186B;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .parcel-route {
          font-size: 14px;
          color: #666;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .parcel-status {
          display: flex;
          align-items: center;
          flex-direction: column;

          .status-text {}

          .completed-time {
            font-size: 12px;
            color: #666;
          }

          .reward-button {
            margin-top: 8px;
            padding: 4px 8px;
            background: #fff7e6;
            border: 1px solid #ffd591;
            color: #fa8c16;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
          }

          .tracking-button {
            margin-top: 8px;
            display: block;
            color: #FF186B;
            font-size: 13px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
          }
        }


      }

      .free-shipping-entry {
        padding: 10px 20px;
        background: #fffbe6;
        border-top: 1px solid #ffe58f;
        color: #faad14;
        font-weight: 600;
        cursor: pointer;
        text-align: right;

        &:hover {
          background: #fff8d8;
        }
      }
    }
  }

  .pagination {
    text-align: center;
    margin-top: 30px;
  }

  .logistics-modal {
    .logistics-content {
      max-height: 400px;
      overflow-y: auto;
      padding: 10px;

      .tracking-steps {
        position: relative;
        padding-left: 20px;
        border-left: 2px solid #FF186B;
        margin-bottom: 20px;

        .tracking-step {
          margin-bottom: 15px;
          position: relative;
          padding-bottom: 15px;

          &:last-child {
            padding-bottom: 0;
          }

          &::before {
            content: '';
            position: absolute;
            left: -25px;
            top: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #FF186B;
          }

          .step-content {
            font-size: 14px;
            margin-bottom: 5px;
          }

          .step-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}

.filter-tabs {
  display: flex;
  border-bottom: 1px solid #F1F1F1;
  margin-bottom: 12px;

  .tab-item {
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: #666;
    transition: all 0.3s;

    &.active {
      color: #ff186b;
      font-weight: 500;

      &:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: #ff186b;
      }

      .badge {
        color: #ff186b;
      }
    }

    .badge {
      display: inline-block;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 9px;
      font-size: 12px;
      padding: 0 4px;
      vertical-align: middle;
      color: #CACACA;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>